<template>
	<view class="add">
		<u--form
			labelPosition="top"
			:model="addressForm"
			:rules="addressRules"
			ref="uForm"
		>
			<u-form-item
				label="姓名"
				prop="username"
			>
				<u--input
					v-model="addressForm.username"
					placeholder="请输入姓名"
				></u--input>
			</u-form-item>
			<u-form-item
				label="联系电话"
				labelWidth="100"
				prop="mobile"
			>
				<u--input
					v-model="addressForm.mobile"
					placeholder="请输入联系电话"
				></u--input>
			</u-form-item>
			<u-form-item
				label="选择地区"
				labelWidth="100"
				prop="city"
			>
				<uni-data-picker
					placeholder="请选择地址"
					popup-title="请选择城市"
					v-model="addressForm.area_code"
					collection="opendb-city-china"
					field="code as value, name as text"
					orderby="value asc"
					self-field="code"
					parent-field="parent_code"
					@change="pickerChange"
				></uni-data-picker>
			</u-form-item>
			<u-form-item
				label="详细地址"
				labelWidth="100"
				prop="address"
			>
				<u--input
					v-model="addressForm.address"
					placeholder="请输入街道门牌号"
				></u--input>
			</u-form-item>
			<u-form-item
				label="是否默认"
				labelWidth="100"
			>
				<u-switch
					v-model="addressForm.selected"
					inactive-color="#eee"
				></u-switch>
			</u-form-item>
			<u-form-item></u-form-item>
			<u-form-item>
				<u-button
					type="primary"
					@click="onSubmit"
				>
					提交
				</u-button>
			</u-form-item>
		</u--form>
	</view>
</template>

<script>
const addressCloudObj = uniCloud.importObject('my-mall-address');

let addressId;
export default {
	data() {
		return {
			addressForm: {
				username: '',
				mobile: '',
				address: '',
				selected: false,
				area_code: '',
				area_name: ''
			},
			addressRules: {
				username: [
					{
						required: true,
						message: '姓名为必填字段',
						trigger: ['blur', 'change']
					},
					{
						min: 2,
						max: 8,
						message: '长度在6-8个字符之间',
						trigger: ['blur', 'change']
					}
				],
				mobile: [
					{
						required: true,
						message: '电话为必填字段',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur']
					}
				],
				address: [
					{
						required: true,
						message: '地址是必填的',
						trigger: ['change', 'blur']
					}
				]
			}
		};
	},
	onLoad(e) {
		addressId = e?.id ?? null;
		if (addressId) this.getAddressOne();
	},
	methods: {
		onSubmit() {
			this.$refs.uForm
				.validate()
				.then(async (res) => {
					// uni.$u.toast('校验通过');
					let title;
					if (this.addressForm._id) {
						let resData = await addressCloudObj.updateOne(this.addressForm);
						title = '修改成功';
					} else {
						let resData = await addressCloudObj.add(this.addressForm);
						title = '添加成功';
					}

					uni.showToast({
						title: title,
						mask: true
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				})
				.catch((errors) => {
					uni.$u.toast('校验失败');
				});
		},
		// 地区选择事件改变
		pickerChange(e) {
			let area_name = e.detail.value.map((item) => {
				return item.text;
			});

			this.addressForm.area_name = area_name.join('');
		},
		// 获取一条地址信息
		async getAddressOne() {
			let res = await addressCloudObj.getOne(addressId);
			this.addressForm = res.data[0];
			console.log(res);
		}
	}
};
</script>

<style lang="scss">
.add {
	padding: 30rpx;
}
</style>
